<extend name="Public/base" />

<block name="style">

	<style>
			
		table.data-table td ,table.data-table th{
			padding:0px;
			height: 30px;
			font-weight: 400;
			line-height:25px;
			text-indent:5px; 
			cursor:pointer;
		}
		
		table.data-table td{
			border: 1px dashed #aaa;
    		border-top: none;
		}
		
		table.data-table th{
			color: #fff;
		    background-color: #259CCA;
		}

		table.left_table{
			border:1px solid #ccc;
		}
		
		/*********************************************
		 * table.css 
		 * 描述：定义数据表格样式
		 * 作用范围: 公共，表格模块
		 **********************************************/
		
		/* 内容区 行默认颜色*/
		.data-table tbody tr {
			background-color: #ffffff;
			color: #686868;
		}
		.data-table thead th,
		.data-table tbody td {
			/*非隔行变色时 用于行区分的单元格底线颜色 */
		    /* border-bottom-color:  #f4f4f4; */
		}
		/* 表头配色 */
		.data-table thead th {
			color:#fff;
		    background-color: #259CCA;
		}
		/* 隔行变色 行默认颜色 */
		.table-striped tbody tr {
			background-color: #fefefe;
			color: #686868;
		}
		/* 隔行变色 偶数行配色 */
		.table-striped tbody tr:nth-child(even) {
			background-color: #f2f2f2;
		
		}
		
		.group_opt img{
			width: 20px;
    		vertical-align: middle;    		
		}
		.group_opt img,.group_opt a{
			cursor: pointer;
		}
		
		.group_name{cursor: pointer;}
		.image_tip{color:#545454　!important;}
		tr.active{background-color: #ddd !important;}
		
		.mainbody {padding-bottom: 80px;}
		
		.page_a{cursor:pointer;}
		.page_a:HOVER {
			text-decoration: underline;	
		}
		
		.num,.next,.prev{
		    padding: 5px 10px;
    		border: 1px solid #ddd;
    		margin:0px 5px 0px 0px;
		}
		.current{
			padding: 5px 10px;
    		border: 1px solid #ddd;
    		margin:0px 5px 0px 0px;
    		background-color:#428bca;
    		color:#fff;
		}
		
		
	</style>

</block>

<block name="body">

	<div>
	
		<table width="100%" class="table">
			<tr>
				<td width="250px" valign="top">
				<!-- style="position:fixed;" -->
					<div class="data-table table-striped" >
						<table class="data-table" width="100%">						
							<thead>
								<tr>
						  		  	<th>属性分类</th>
						  		  	<th width="80px">&nbsp;</th>
						  		</tr>
							</thead>
														
							<tr>
								<td>名称</td>
								<td>备注</td>
							</tr>
							
				  		  <tbody id="attrCategoryDatas">
				  		  	<notempty name="_list">
								<volist name="_list" id="vo">
								<tr id="category_{$vo['id']}" data-id="{$vo['id']}" class="cat_name_tr">
									<td>{$vo.name}</td>
									<td><span>{:$vo['remark']}</span></td>
								</tr>
								</volist>
							<else/>
								<td colspan="2" class="text-center"> 无属性分类数据! </td>
							</notempty>
				  		  </tbody>
				  		  
				  		  <if condition=" $categoryTotalpages gt 1 ">
				  		  <tbody>
				  		  	<tr>
				  		  		<td style="text-align:center;" colspan="2">
				  		  			<a href="javascript:;" class="page_a" onclick="prevPage('load_category');">上一页</a>&nbsp;&nbsp;
				  		  			<a href="javascript:;" class="page_a" onclick="nextPage('load_category');">下一页</a>
				  		  		</td>
				  		  	</tr>
				  		  </tbody>
				  		  </if>
				  			
				  		</table>
					</div>							
				</td>
				<td width="15px" valign="top">&nbsp;</td>
				<td width="250px" valign="top">
				<!-- style="position:fixed;" -->
					<div class="data-table table-striped" >
						<table class="data-table" width="100%">						
							<thead>
								<tr>
						  		  	<th><span id="cat_name_show" ></span>属性组列表</th>
						  		  	<th width="80px">&nbsp;</th>
						  		</tr>
							</thead>
							
							<tr>
								<td>名称</td>
								<td>备注</td>
							</tr>
							
				  		  <tbody id="attrGroupDatas">
				  		  	 <tr><td style="text-align:center;" colspan="2">点击左侧的属性分类，查看对应的属性组</td></tr>				  		  		
				  		  </tbody>
				  		  
				  		  <tbody id="group_pages" style="display:none;">
				  		  	<tr>
				  		  		<td style="text-align:center;" colspan="2">
				  		  			<a href="javascript:;" class="page_a" onclick="prevPage('load_group');">上一页</a>&nbsp;&nbsp;
				  		  			<a href="javascript:;" class="page_a" onclick="nextPage('load_group');">下一页</a>
				  		  		</td>
				  		  	</tr>
				  		  </tbody>
				  			
				  		</table>
					</div>							
				</td>
				<td width="15px" valign="top">&nbsp;</td>
				<td valign="top">
							        
				    <div class="data-table table-striped" id="right_content">	
				    			    
				     	<table class="data-table" width="100%">		
				     		<thead>
					    		<tr>
					    			<th colspan="4"><span id="group_name"></span>属性值列表</th>
					    		</tr>
					    	</thead>			    
					    	<tbody>
					    		<tr>
					    			<td width="60px">序号</td>
					    			<td>属性值名称</td>
					    			<td>排序</td>
					    			<td width="25%">备注</td>
					    		</tr>
					    	</tbody>
					    	
					    	<tbody id="datalist-div">
					    		<tr><td colspan="4" style="text-align: center;">点击左侧的属性组，查看对应的属性值</td></tr>
					    	</tbody>				    						    						    	
					    </table>	
					    
					    <br/>
					    
					    <div class="page" id="page_div">
					        {$_page}
					    </div>
					    					    
				    </div>	
				        		
				</td>	
				
			</tr> 	
	 	</table>
	
	</div>   
    
</block>

<block name="script">

	<script type="text/javascript">
	
		$(function(){
			
			bindEvent();
			
			bindEventCategory();
			
		});
		
		/* 当前类id */
		var cat_id = 0;
		/* 当前组id */
		var groupId = 0;
		/* 属性分类 页数 默认1 */
		var category_page = 1;
		/* 属性分类 总页数 */
		var category_total_page = {$categoryTotalpages|default=1};
		/* 属性组 页数 默认1 */
		var group_page = 1;
		/* 属性组 总页数  */
		var group_total_page = 1;
		/* 属性值 页数 默认1 */
		var val_page = 1;
		var val_rows = 12;
		
		/* loading attr_category data */
		function loadAttrCategoryData(){
			_show_public_loading();
			$.ajax({
				url:"{:U('loadAttrCategoryData')}",
				data:{'curPage':category_page},
				dataType:'html',
				type:'POST',
				success:function(data){
					$('#attrCategoryDatas').html(data);
					
					$('#category_'+cat_id).addClass('active').siblings().removeClass('acitve');
					
					//隐藏加载图标
		            _hide_public_loading();
				},error:function(){
					
				},complete:function(){
					
				}
			});			
		}
		
		/* loading attr_group data */
		function loadAttrGroupData(_cat_id){
			_show_public_loading();
			$.ajax({
				url:"{:U('loadAttrGroupData')}",
				data:{'cat_id':cat_id,'curPage':group_page},
				dataType:'html',
				type:'POST',
				success:function(data){
					$('#attrGroupDatas').html(data);
					
					if( typeof(_cat_id) == 'undefined' ){
						$('#group_'+groupId).addClass('active').siblings().removeClass('acitve');
					}					
					
					//隐藏加载图标
		            _hide_public_loading();
				},error:function(){
					
				},complete:function(){
					
				}
			});			
		}
		
		/* loading attr_value data */
		function loadAttrValData(group_id){
			_show_public_loading();
			$.ajax({
				url:"{:U('loadAttrGroupValData')}",
				data:{'group_id':group_id,'p':val_page,'rows':val_rows},
				dataType:'html',
				type:'GET',
				success:function(data){
					$('#datalist-div').html(data);
					
					//隐藏加载图标
		            _hide_public_loading();
				},error:function(){
					
				},complete:function(){
					
				}
			});			
		}
		
		
		/* 绑定事件 */
		function bindEvent(){			
			$('.group_name_td').on("mouseover mouseout",function(event){
				 if(event.type == "mouseover"){
				    //鼠标悬浮
					$(this).find('.group_name').css({'text-decoration':'underline'});
				 }else if(event.type == "mouseout"){
				    //鼠标离开
					$(this).find('.group_name').css({'text-decoration':'none'});
				 }
		   }).click(function(){
			 
			   $(this).parent().addClass('active');
			   $(this).parent().siblings().removeClass('active');
			   
			   var gid = $(this).find('.group_name').attr('data-id');
			   groupId = gid;
			   
			   $('span#group_name').html("【"+$(this).find('.group_name').html()+"】的");
			   
			   $('#datalist-div').html('<tr><td colspan="4" style="text-align: center;">数据加载中,请稍等...</td></tr>');
			   /* 清除分页数据 */
			   $('#page_div').html('');
			   
			   loadAttrValData(gid);			   
			   
		   });
		}	
		
		function bindEventCategory(){
			$('.cat_name_tr').on("mouseover mouseout",function(event){
				 if(event.type == "mouseover"){
				    //鼠标悬浮
					$(this).css({'text-decoration':'underline'});
				 }else if(event.type == "mouseout"){
				    //鼠标离开
					$(this).css({'text-decoration':'none'});
				 }
		   }).click(function(){
			 
			   $(this).addClass('active');
			   $(this).siblings().removeClass('active');
			   
			   var cid = $(this).attr('data-id');
			   cat_id = cid;
			   
			   $('span#cat_name_show').html("【"+$(this).find("td:eq(0)").html()+"】的");
			   
			   /* 清空属性组数据 */
			   $('#attrGroupDatas').html("<tr><td colspan='2' style='text-align:center;'>数据加载中,请稍等...</td></tr>")
			   $('#group_pages').hide();
			   /* 清空属性值列表数据 */
			   $('#datalist-div').html('<tr><td colspan="4" style="text-align: center;">点击左侧的属性组，查看对应的属性值</td></tr>');	
			   /* 清除分页数据 */
			   $('#page_div').html('');
			   /* 清空标题显示 */
			   $('#group_name').html('');
			   
			   loadAttrGroupData(cat_id);			   
			   
		   });
		}
		
		function bindEventForValPageA(){
			
			$('#page_div a').click(function(){
				event.preventDefault();   
				
				val_page = $(this).html();
				if( $(this).hasClass('next') ){
					val_page = parseInt($('.current').html())+parseInt(1);
				}else if( $(this).hasClass('prev') ){
					val_page = parseInt($('.current').html())-parseInt(1);
				}
	
				loadAttrValData(groupId);
				return false;
			});
			
		}
		
		
		
		/* 上一页数据  */
		function prevPage(flag){			
		  var _curP = 0;
		  if( flag == 'load_category' ){
			  _curP = category_page - 1;
		  }else if( flag == 'load_group' ){
			  _curP = group_page - 1;
		  }		
		  
		  if( _curP <= 0 ){
			  showvfmsg(-2, '没有上一页了！',1000);
			  /* NBAlert('warning','没有上一页了！',1000); */
			  return;
		  }
		  
		  if( flag == 'load_category' ){
			  category_page--;
			  loadAttrCategoryData();
		  }else if( flag == 'load_group' ){
			  group_page--;
			  loadAttrGroupData();
		  }			  
		}
		/* 下一页数据 */
		function nextPage(flag){
		  //group_total_page	
		  //category_total_page
		  var _curP = 0;
		  if( flag == 'load_category' ){
			  _curP = category_page + 1;
			  if( _curP > category_total_page ){
				  showvfmsg(-2, '没有下一页了！',1000);
				 /*  NBAlert('warning','没有下一页了！',1000); */
				  return;
			  }
			  
			  category_page++;			  
			  loadAttrCategoryData();
		  }else if( flag == 'load_group' ){
			  _curP = group_page + 1;
			  if( _curP > group_total_page ){
				  showvfmsg(-2, '没有下一页了！',1000);
				  /*  NBAlert('warning','没有下一页了！',1000); */
				  return;
			  }
			  
			  group_page++;			  
			  loadAttrGroupData();	
		  }			  
		  	  
		  
		}
		
	    
	</script>

</block>

